<script setup>
import { Calendar, Search } from '@element-plus/icons-vue'
import { constant } from 'lodash'
import { reactive } from 'vue-demi'

const { proxy } = getCurrentInstance()
const ruleFormRef = ref(null)
const newRef = ref(null)
const props = defineProps({})

const supplierIsShow = ref(false)

// tabs默认值
const activeName = ref('1')

// 新增表单 字段
const addForm = reactive({
  programmeCode: '', //方案代码
  b: '',
  programmeName: '', //方案名称
  programmeView: '', //方案描述
  defaultFlag: '2', //默认标志
  idList: '', //策略信息id
  strategyMessageList: [
    {
      id: '', //id(序号)
      strategyCode: '', //策略代码
      strategyDeliver: '', //发货策略
      enable: '0', //是否启用
      strategyView: '' //策略描述
    }
  ]
})

// 新增表单 校验规则
const addrules = reactive({
  a: [{ required: true, message: '请输入', trigger: 'blur' }]
})
// 回显数据赋值
watchEffect(() => {
  if (typeof props.ruleForm == 'object' && props.ruleForm?.id) {
    for (let Key in props.ruleForm) {
      addForm[Key] = props.ruleForm[Key]
    }
  }
})

// 供应商弹窗
const focus = () => {
  supplierIsShow.value = true
}

// 选择供应商
const preservation = val => {
  ruleForm.materialSuppliers = val.id
  ruleForm.suppliersName = val.supplierName
  supplierIsShow.value = false
}

// 提交数据
const submit = () => {
  return new Promise((resolve, reject) => {
    newRef.value.validate(valid => {
      if (!valid) {
        proxy.warningMsg('请填写完整')
        resolve(false)
      } else {
        resolve(addForm)
      }
    })
  })
}
defineExpose({ submit })
</script>

<template>
  <div class="app-container">
    <!-- 新增 表单 -->
    <el-form
      :model="addForm"
      label-width="120px"
      class="demo-ruleForm"
      :rules="addrules"
      status-icon
      inline
      ref="newRef"
    >
      <el-form-item label="备件采购订单号">
        <el-input v-model="addForm.warehouseTypeDict" disabled />
      </el-form-item>
      <el-form-item label="采购合同编号">
        <el-input v-model="addForm.warehouseTypeDict" />
      </el-form-item>
      <el-form-item label="供应商信息">
        <el-input v-model="addForm.warehouseTypeDict" @click="focus" :prefix-icon="Search" />
      </el-form-item>

      <el-form-item label="首批到货时间">
        <el-date-picker
          value-format="YYYY-MM-DD"
          v-model="addForm.warehouseTypeDict"
          arrow-control
          placeholder="年/月/日"
        />
      </el-form-item>
      <el-form-item label="末批到货时间">
        <el-date-picker
          value-format="YYYY-MM-DD"
          v-model="addForm.warehouseTypeDict"
          arrow-control
          placeholder="年/月/日"
        />
      </el-form-item>
      <div class="flex-items-center textareaClass">
        <label>备注</label>
        <el-input
          class="inputmargin"
          type="textarea"
          v-model="addForm.b"
          :input-style="{
            width: '100%'
          }"
        />
      </div>

      <!-- 明细项 表格数据 -->
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="明细项" name="1"></el-tab-pane>
        <el-table v-loading="loading" stripe border :data="addForm.strategyMessageList">
          <el-table-column label="备件编码" align="center" prop="pdoductNumber" width="auto"> </el-table-column>
          <el-table-column label="备件名称" align="center" width="auto" prop="itemCode"> </el-table-column>
          <el-table-column label="备件规格" prop="materialCode" width="auto" align="center" />
          <el-table-column label="下达数量" prop="netWeight" width="auto" align="center" />
          <el-table-column label="实际数量" prop="strategyCode" width="200" align="center">
            <template #default="scope">
              <el-input
                type="number"
                oninput="if(value<=0)value=''"
                v-model="scope.row.strategyCode"
                placeholder="请填写内容"
              />
            </template>
          </el-table-column>
          <el-table-column label="计划单价" prop="netWeight" width="auto" align="center" />
          <el-table-column label="实际单价" prop="strategyCode" width="200" align="center">
            <template #default="scope">
              <el-input
                type="number"
                oninput="if(value<=0)value=''"
                v-model="scope.row.strategyCode"
                placeholder="请填写内容"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-tabs>
    </el-form>
    <!-- 供应商信息 -->
    <Supplier :is-show="supplierIsShow" @preservation="preservation" @cancel="supplierIsShow = false" />
  </div>
</template>
<style lang="scss" scoped>
.title {
  color: #3985fb;
}
label {
  display: inline-block;
  width: 120px;
  text-align: right;
  padding-right: 12px;
}
.app-container ::v-deep .el-input__inner {
  width: 168px !important;
}

.app-container ::v-deep .el-form-item__content {
  width: 168px !important;
}
</style>
